<template>
	<div class="spider-contrainer layout-padding">
		<el-card class="layout-padding-auto">
			<div class="card layout-padding-auto">
			<h3 class="card__title">更新价格数据</h3>
			<p class="card__content">爬虫自动从中华人民共和国商务部网站获取价格数据</p>
			<p>
				<span>点击跳转:&nbsp;</span>
				<a href="https://cif.mofcom.gov.cn/cif/html/dataCenter/index.html?jgnfcprd">中华人民共和国商务部</a>
			</p>

			<el-button @click="update('price')">
				<span>点击更新</span>
			</el-button>
			<div class="card__date">
				<span>上次更新时间:</span>
				<span id="price">2023/03/25 14:12:33</span>
			</div>
			<div class="card__arrow">
					<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" height="15" width="15">
						<path
							fill="#fff"
							d="M13.4697 17.9697C13.1768 18.2626 13.1768 18.7374 13.4697 19.0303C13.7626 19.3232 14.2374 19.3232 14.5303 19.0303L20.3232 13.2374C21.0066 12.554 21.0066 11.446 20.3232 10.7626L14.5303 4.96967C14.2374 4.67678 13.7626 4.67678 13.4697 4.96967C13.1768 5.26256 13.1768 5.73744 13.4697 6.03033L18.6893 11.25H4C3.58579 11.25 3.25 11.5858 3.25 12C3.25 12.4142 3.58579 12.75 4 12.75H18.6893L13.4697 17.9697Z"
						></path>
					</svg>
				</div>
			</div>

			<div class="card layout-padding-auto">
				<h3 class="card__title">更新新闻数据</h3>
				<p class="card__content">爬虫自动从全国重点农产品市场信息平台获取新闻数据</p>
				<p>
					<span>点击跳转:&nbsp;</span>
					<a href="http://ncpscxx.moa.gov.cn/#/sing?headingIndex=true&item=1">全国重点农产品市场信息平台</a>
				</p>
				<el-button @click="update('pest')">
					<span>点击更新</span>
				</el-button>
				<div class="card__date">
					<span>上次更新时间:</span>
					<span id="news">2023/03/25  14:12:50</span>
				</div>
				<div class="card__arrow">
					<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" height="15" width="15">
						<path
							fill="#fff"
							d="M13.4697 17.9697C13.1768 18.2626 13.1768 18.7374 13.4697 19.0303C13.7626 19.3232 14.2374 19.3232 14.5303 19.0303L20.3232 13.2374C21.0066 12.554 21.0066 11.446 20.3232 10.7626L14.5303 4.96967C14.2374 4.67678 13.7626 4.67678 13.4697 4.96967C13.1768 5.26256 13.1768 5.73744 13.4697 6.03033L18.6893 11.25H4C3.58579 11.25 3.25 11.5858 3.25 12C3.25 12.4142 3.58579 12.75 4 12.75H18.6893L13.4697 17.9697Z"
						></path>
					</svg>
				</div>
			</div>

			<div class="card layout-padding-auto">
				<h3 class="card__title">更新病虫害数据</h3>
				<p class="card__content">爬虫自动从智慧农资服务平台获取病虫害数据</p>
				<p>
					<span>点击跳转:&nbsp;</span>
					<a href="http://pic.114nz.com/">智慧农资服务平台</a>
				</p>
				<el-button @click="update('pest')">
					<span>点击更新</span>
				</el-button>
				<div class="card__date">
					<span>上次更新时间:</span>
					<span id="pest">2023/03/25  14:13:33</span>
				</div>
				<div class="card__arrow">
					<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" height="15" width="15">
						<path
							fill="#fff"
							d="M13.4697 17.9697C13.1768 18.2626 13.1768 18.7374 13.4697 19.0303C13.7626 19.3232 14.2374 19.3232 14.5303 19.0303L20.3232 13.2374C21.0066 12.554 21.0066 11.446 20.3232 10.7626L14.5303 4.96967C14.2374 4.67678 13.7626 4.67678 13.4697 4.96967C13.1768 5.26256 13.1768 5.73744 13.4697 6.03033L18.6893 11.25H4C3.58579 11.25 3.25 11.5858 3.25 12C3.25 12.4142 3.58579 12.75 4 12.75H18.6893L13.4697 17.9697Z"
						></path>
					</svg>
				</div>
			</div>
		</el-card>
		
	</div>

</template>


<script setup name="spider">
import { ElMessageBox, ElMessage } from 'element-plus';
import axios from 'axios';
import api from "/@/api.js";

const info = ref();
const update = (type) => {

	axios({
		method: 'post',
		url: api.commonUrl + '/spider/getspider',
		data: `type=` + type,
	}).then(function (response) {
		if (response.data.code === 200) {
			ElMessage.success(response.data.message);
			var span = document.getElementById(type);
			span.innerHTML = currentTime();
		} else {
			ElMessage.error(response.data.message);
		}
	});
};

// 页面加载时
onMounted(() => {
	
});
function currentTime() {
    var date = new Date();
    var year = date.getFullYear(); //月份从0~11，所以加一
    let month = date.getMonth();
    console.log("month",month);
    var dateArr = [
        date.getMonth() + 1,
        date.getDate(),
        date.getHours(),
        date.getMinutes(),
        date.getSeconds(),
    ];
    //如果格式是MM则需要此步骤，如果是M格式则此循环注释掉
    for (var i = 0; i < dateArr.length; i++) {
        if (dateArr[i] >= 1 && dateArr[i] <= 9) {
            dateArr[i] = "0" + dateArr[i];
        }
    }
    var strDate =
        year +
        "/" +
        dateArr[0] +
        "/" +
        dateArr[1] +
        " " +
        dateArr[2] +
        ":" +
        dateArr[3] +
        ":" +
        dateArr[4];
        //此处可以拿外部的变量接收，也可直接返回  strDate:2022-05-01 13:25:30
       	//this.date = strDate;
    console.log("strDate",strDate);
	return strDate;
}
</script>

<style scoped lang="scss">
/* this card is inspired form this - https://georgefrancis.dev/ */
.spider-contrainer {
	:deep(.el-card__body) {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: auto;
		.el-table {
			flex: 1;
		}
	}
}
.card {
	--border-radius: 0.75rem;
	--primary-color: #7257fa;
	--secondary-color: #3c3852;
	margin: 20px;
	width: 40%;
	font-family: 'Arial';
	padding: 1rem;
	cursor: pointer;
	border-radius: var(--border-radius);
	background: #f1f1f3;
	box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 3%);
	position: relative;
}

.card > * + * {
	margin-top: 1.1em;
}

.card .card__content {
	color: var(--secondary-color);
	font-size: 0.86rem;
}

.card .card__title {
	padding: 0;
	font-size: 1.3rem;
	font-weight: bold;
}

.card .card__date {
	color: #6e6b80;
	font-size: 0.8rem;
}

.card .card__arrow {
	position: absolute;
	background: var(--primary-color);
	padding: 0.4rem;
	border-top-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
	bottom: 0;
	right: 0;
	transition: 0.2s;
	display: flex;
	justify-content: center;
	align-items: center;
}

.card svg {
	transition: 0.2s;
}

/* hover */
.card:hover .card__title {
	color: var(--primary-color);
	text-decoration: underline;
}

.card:hover .card__arrow {
	background: #111;
}

.card:hover .card__arrow svg {
	transform: translateX(3px);
}

a {
	text-decoration: none;
}
</style>